<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>S3 Bucket REST service</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
    <!-- Load AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("S3Bucket", []);

        app.directive('fileOnChange', function() {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var onChangeHandler = scope.$eval(attrs.fileOnChange);
                    element.on('change', onChangeHandler);
                    element.on('$destroy', function() {
                        element.off();
                    });
                }
            };
        });

        //Controller Part
        app.controller("S3BucketController", function ($scope, $http) {

            //Initialize page with default data which is blank in this example
            $scope.files = [];

            $scope.form = {
                file: null,
                filename: "",
                mimetype: ""
            };

            //Now load the data from server
            _refreshPageData();

            $scope.fileChanged = function(event) {
                $scope.form.file = event.target.files[0];
                $scope.form.filename = event.target.files[0].name;
                if (event.target.files[0].type) {
                    $scope.form.mimetype = event.target.files[0].type;
                } else {
                    $scope.form.mimetype = "application/octet-stream"
                }
            };

            //HTTP POST methods to upload files
            $scope.add = function (aaa) {
                console.log(aaa);
                var data = new FormData();
                data.append('file', $scope.form.file);
                data.append('filename', $scope.form.filename);
                data.append('mimetype', $scope.form.mimetype);

                $http({
                    method: "POST",
                    url: '/async-s3/upload',
                    data: data,
                    transformRequest: angular.identity,
                    headers: {
                        'Content-Type': undefined
                    }
                }).then(_success, _error);
            };

            /* Private Methods */

            //HTTP GET- get all files in bucket
            function _refreshPageData() {
                $http({
                    method: 'GET',
                    url: '/async-s3'
                }).then(function successCallback(response) {
                    $scope.files = response.data;
                }, function errorCallback(response) {
                    console.log(response.statusText);
                });
            }

            function _success(response) {
                _refreshPageData();
                _clearForm();
            }

            function _error(response) {
                alert(response.data.message || response.statusText);
            }

            //Clear the form
            function _clearForm() {
                $scope.form.file = null;
                $scope.form.filename = "";
                $scope.form.mimetype = "";
            }
        });
    </script>
</head>
<body ng-app="S3Bucket" ng-controller="S3BucketController">

<div class="container">
    <h1>REST Service - S3 Bucket files manager</h1>

    <h3>Upload file</h3>
    <form ng-submit="add()" name="MyForm">
        <div class="row">
            <div class="col-6">
                <input type="file" name="file" id="fileToUpload" file-on-change="fileChanged">
                <input type="hidden" name="filename" id="fileName" value="">
                <input type="hidden" name="mimetype" id="mimeType" value="">
            </div>
        </div>
        <input type="submit" value="Upload"/>
    </form>

    <h3>Files in Bucket</h3>
    <div class="row">
        <div class="col-8">Filename</div>
        <div class="col-4">Size</div>
    </div>
    <div class="row" ng-repeat="file in files">
        <div class="col-8"><a href="{{ '/async-s3/download/' + file.objectKey }}">{{ file.objectKey }}</a></div>
        <div class="col-4">{{ file.size }} B</div>
    </div>
</div>

</body>
</html>
